<template>
	<view class="">
		<u-navbar :is-back="false" title="消息" :is-fixed="true" :border-bottom="false">
			<view class="slot-wrap">
				<view class="" @click="clearMsg">
					清除未读
				</view>
			</view>
		</u-navbar>
		<u-cell-group>
			<u-cell-item :arrow="false"  v-for="(item,index) in msg_list" :key="index">
				<view class="item">
					<view class="msg-icon">
						<image :src="item.icon" mode="widthFix"></image>
					</view>
					<view class="msg-box">
						<view class="title">
							<text class="theme">{{item.title}}</text>
							<text class="time">{{item.time}}</text>
						</view>
						<view class="message">
							<text class="msg">{{item.msg}}</text>
							<view v-if="item.num" class="num">{{item.num}}</view>
						</view>
					</view>
				</view>
			</u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
export default{
	data(){
		return{
			msg_list:[
				{
					icon:require('../../static/image/msg/Hot.png'),
					title:'热点新闻',
					time:'刚刚',
					type:'',
					msg:'热点通知',
					num:4,
				},
				{
					icon:require('../../static/image/msg/notice.png'),
					title:'通知',
					time:'刚刚',
					type:'',
					msg:'系统通知',
					num:6,
				},
				{
					icon:require('../../static/image/msg/msg.png'),
					title:'消息',
					time:'刚刚',
					type:'',
					msg:'系统消息',
					num:3,
				},
				{
					icon:require('../../static/image/msg/sign.png'),
					title:'签到',
					time:'刚刚',
					type:'',
					msg:'提醒签到',
					num:1
				},
				{
					icon:require('../../static/image/msg/fuli.png'),
					title:'福利',
					time:'刚刚',
					type:'',
					msg:'奖励提醒',
					num:3,
				},
				{
					icon:require('../../static/image/msg/jingqu.png'),
					title:'景点/门票',
					time:'刚刚',
					type:'',
					msg:'【最后一天】5折起...',
					num:2,
				},
				{
					icon:require('../../static/image/msg/jiudian.png'),
					title:'酒店住宿',
					time:'刚刚',
					type:'',
					msg:'【待领取】速来瓜分亿元补贴',
					num:3
				},
			]
			
		}
	},
	mounted() {
	},
	methods:{
		clearMsg(){
			this.msg_list.map(item=>{
				item.num = 0;
			})
			this.$u.toast('清除成功')
		}
	},
	// 下拉刷新
	onPullDownRefresh(){
		setTimeout(()=>{
			// 停止加载
			uni.stopPullDownRefresh();
		},1000)
	}
}
</script>

<style lang="scss" scoped>
page{
	background-color: #fff;
}
.slot-wrap{
	flex:1;
	display: flex;
	justify-content: flex-end;
	box-sizing: border-box;
	padding-right:30rpx;
}
.item{
	display: flex;
	align-items: center;
	box-sizing: border-box;
	text-align: left;
	width: 100%;
	.msg-icon{
		flex-shrink: 0;
		margin-right:30rpx;
		image{
			width: 50rpx;
			height: 50rpx;
		}
	}
	.msg-box{
		display: flex;
		flex-direction: column;
		height: 100rpx;
		flex:1;
		box-sizing: border-box;
		justify-content: space-around;
		padding-right:10px;
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color:#999;
			.theme{
				font-weight: bold;
				font-size: 30rpx;
				color:#333;
			}
		}
		.message{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			color:#666;
			.msg{
				flex:1;
			}
			.num{
				flex-shrink: 0;
				height: 30rpx;
				min-width: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color:#fff;
				background-color: #FF0000;
				border-radius: 30rpx;
				text-align: center;
			}
		}
	}
}
</style>
